import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
// vite支持eslint
import ViteEslint from 'vite-plugin-eslint';
// elementPlus 按需引入
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
// 绝对路径
import { resolve } from 'path';
// 开启gzip
import viteCompression from 'vite-plugin-compression';
// 打包文件大小分析
import { visualizer } from 'rollup-plugin-visualizer';
import type { ConfigEnv, AliasOptions } from 'vite';

// 引入 path 绝对路径
const pathResolve = (dir: string) => {
	return resolve(__dirname, './', dir);
};
// 路径别名
const alias: AliasOptions = {
	'@': pathResolve('src'),
	'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
};

const viteConfig = defineConfig((mode: ConfigEnv) => {
	const { VITE_PORT, VITE_OPEN, VITE_HOST } = loadEnv(mode.mode, process.cwd());
	return {
		resolve: { alias },
		plugins: [
			vue(),
			ViteEslint(),
			{
				...viteCompression({
					// 默认即可
					verbose: true,
					// 开启压缩（不禁用），默认即可
					disable: false,
					// 删除源文件
					deleteOriginFile: true,
					// 压缩前最小文件大小
					threshold: 10240,
					// 压缩算法
					algorithm: 'gzip',
					// 文件类型
					ext: '.gz',
				}),
				// 仅在打包时运行
				apply: 'build',
			},
			AutoImport({
				resolvers: [ElementPlusResolver()],
			}),
			Components({
				dirs: [],
				resolvers: [ElementPlusResolver()],
				// 取消组件重复报错
				directoryAsNamespace: true,
			}),
			// 将这个visualizer插件放到最后的位置中 会在目录下创建一个stats.html
			visualizer({
				// 生成图表文件的名称
				filename: 'stats.html',
				// 自动打开
				open: false,
				// 从源代码中收集 gzip 大小并将其显示在图表中
				gzipSize: true,
				// 从源代码中收集 brotli 大小并将其显示在图表中
				brotliSize: false,
			}),
		],
		css: {
			// 在此处设置less全局变量配置
			preprocessorOptions: {
				less: {
					additionalData: '@import "./src/theme/common.less";', // 此处指定less全局变量样式文件
				},
			},
		},
		server: {
			// 是否开启https
			https: false,
			// 端口号
			port: Number(VITE_PORT),
			// 监听所有地址
			host: VITE_HOST,
			// 服务启动时是否自动打开浏览器
			open: JSON.parse(VITE_OPEN),
			proxy: {
				// 代理规则示例
				'/development': {
					// 目标服务器地址
					target: 'http://localhost:5000',
					// 如果目标服务器是跨域的，需要将这个设置为 true
					changeOrigin: true,
					// 可选，重写请求路径
					rewrite: path => path.replace(/^\/development/, ''),
				},
			},
		},
		build: {
			// 设置最终构建的浏览器兼容目标
			target: 'es2015',
			// 构建后是否生成 source map 文件
			sourcemap: false,
			//  chunk 大小警告的限制（以 kbs 为单位）
			chunkSizeWarningLimit: 2000,
			// 启用/禁用 gzip 压缩大小报告
			reportCompressedSize: false,
			// 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
			assetsInlineLimit: 4096,
			// css代码拆分,禁用则所有样式保存在一个css里面
			cssCodeSplit: true,
			// rollup 配置
			rollupOptions: {
				output: {
					// 引入文件名的名称
					chunkFileNames: 'js/[name]-[hash].js',
					// 包的入口文件名称
					entryFileNames: 'js/[name]-[hash].js',
					// 资源文件像 字体，图片等
					assetFileNames: '[ext]/[name]-[hash].[ext]',
					/**
					 * 自定义分包
					 * 依赖包进行拆分
					 * importers：当前模块引入的静态模块
					 * dynamicImporters：被动态引入的模块
					 * importers + dynamicImporters 引用大于1，统一打包 manifest 中
					 */
					manualChunks(id: any, { getModuleInfo }): string {
						if (id.includes('node_modules')) {
							return id.toString().split('node_modules/')[1].split('/')[0].toString();
						} else if (id.includes('src') && getModuleInfo(id).importers.length + getModuleInfo(id).dynamicImporters.length > 1) {
							return 'manifest';
						}
					},
				},
			},
		},
	};
});

export default viteConfig;
